<template>
  <div class="out_box">
    <div class="left_box">
      <div class="avatar">
        <img v-if="imgUrl" :src="imgUrl" class="avatar" />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/api/UserManage/uploadPhoto"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="headers"
        >
          <el-button size="small" type="primary" class="avatar_button"
            >修改头像</el-button
          >
        </el-upload>
      </div>
      <div class="count_info" style="margin-top: 10vh">
        <el-descriptions
          :column="1"
          size="small"
          border
          :labelStyle="labelStyle"
          :contentStyle="contentStyle"
        >
          <template slot="extra" v-if="!edit">
            <el-button type="primary" size="small" @click="edit = true"
              >修改密码</el-button
            >
          </template>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            <span>{{ form_account_info.userName }}</span>
          </el-descriptions-item>

          <!-- <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              原密码
            </template>
            <div v-if="edit">
              <el-input v-model="form_account_info.oldPassword" class="input_out"></el-input>
              <span class="tip">6-20位</span>
            </div>

            <span>{{ form_account_info.oldPassword }}</span>
          </el-descriptions-item> -->

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              新密码
            </template>
            <div v-if="edit">
              <el-input
                v-model="form_account_info.newPassword"
                class="input_out"
              ></el-input>
              <span class="tip">6-20位</span>
            </div>
            <span v-else>{{ form_account_info.newPassword }}</span>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              确认新密码
            </template>
            <div v-if="edit">
              <el-input
                v-model="form_account_info.RNewPassword"
                class="input_out"
              ></el-input>
              <span class="tip">6-20位</span>
            </div>
            <span v-else>{{ form_account_info.RNewPassword }}</span>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              密码过期
            </template>
            <span> 永不过期 </span>
          </el-descriptions-item>

          <el-descriptions-item v-if="edit">
            <template slot="label">
              <i class="el-icon-user"></i>
            </template>
            <el-button
              type="primary"
              @click="submit(form_account_info)"
              size="mini"
              >保存</el-button
            >
            <el-button type="primary" @click="edit = false" size="mini"
              >取消</el-button
            >
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="right_box">
      <span>密码最近修改记录</span>
      <hr />
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column prop="userId" label="用户" width="180">
        </el-table-column>
        <el-table-column prop="pwdTime" label="时间" width="180">
          <template slot-scope="{row}">
           {{(row.pwdTime + '').slice(0,10)}}
          </template>
        </el-table-column>
        <el-table-column prop="ipAddress" label="IP地址"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { changePassword } from "@/api/user/myAccount";
import { mapMutations, mapState } from "vuex";
import { getPwdHistory } from "@/api/user/myAccount";
export default {
  name: "myAccount",
  data() {
    return {
      tableData: [],
      account_info: {},
      form_account_info: {},
      edit: false,
      labelStyle: {
        "text-align": "center",
      },
      contentStyle: {
        "text-align": "center",
        "min-width": "300px",
      },
    };
  },
  methods: {
    ...mapMutations("myInfo", ["GETPHOTO_"]),
    submit({ userId, newPassword: userPassword, RNewPassword: rePassword }) {
      if (userPassword === rePassword) {
        changePassword(userId, userPassword).then(
          (res) => {
            this.$message({ type: "success", message: "修改成功" });
            this.edit = false;
          },
          (err) => {
            this.$message({ type: "error", message: "修改失败" });
          }
        );
      } else {
        this.$message({ type: "error", message: "两次密码输入不一致" });
      }
    },
    handleAvatarSuccess(res, file) {
      this.GETPHOTO_(URL.createObjectURL(file.raw));
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt10M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isJPG && isLt10M;
    },
    async getPwdHistory(){
      let result = await getPwdHistory()
      this.tableData = result
    }
  },
  computed: {
    ...mapState("myInfo", ["imgUrl", "userInfo"]),
    headers() {
      let { userId } = JSON.parse(sessionStorage.getItem("userInfo"));
      let person = encodeURIComponent(userId);
      let card = encodeURIComponent(sessionStorage.getItem("nowRoot"));
      return {
        person,
        card,
      };
    },
  },
  created() {
    const { userName, userId } = this.userInfo;
    this.account_info.userName = userName;
    this.account_info.userId = userId;
    this.form_account_info.userName = userName;
    this.form_account_info.userId = userId;
    this.getPwdHistory()
  },
};
</script>

<style scoped>
.out_box {
  display: flex;
}

.left_box {
  width: 50%;
  border-left: 1px solid rgba(237, 231, 231, 0.849);
  border-top: 1px solid rgba(237, 231, 231, 0.849);
}

.right_box {
  width: 50%;
  border-left: 1px solid rgba(237, 231, 231, 0.849);
  border-top: 1px solid rgba(237, 231, 231, 0.849);
  border-right: 1px solid rgba(237, 231, 231, 0.849);
}

.avatar {
  width: 150px;
  height: 180px;
  margin: auto;
}

.avatar_button {
  margin: auto;
}

.count_info {
}

.input_out {
  width: 60%;
}

.tip {
  margin-left: 10px;
}

.el-descriptions__header {
  margin-bottom: 0;
}
</style>